<template>
	<view class="groupBuy fs14 p10 bgf5">
		<view class="bgff px10 pb6 r6">
			<view class="flex flexC flexB pb10 pt20 borb">
				<text class="bold6 c00">团购券名称</text>
				<text class="c85 fs12">{{detail.name}}</text>
			</view>
			<view class="flex flexC flexB pb10 pt20 borb">
				<text class="bold6 c00">可用时长</text>
				<text class="c85 fs12">{{detail.hour}}小时</text>
			</view>
			<view class="flex flexC flexB pb10 pt20 borb">
				<text class="bold6 c00">可使用时间段</text>
				<view class="flex1 aliR c85 fs12">
					<view>{{detail.week}}</view>
					<view>{{detail.time}}</view>
				</view>
			</view>
			<view class="flex flexC flexB pb10 pt20">
				<text class="bold6 c00">可使用范围</text>
				<view class="flex1 aliR c85 fs12">
					<view v-for="(item,index) in detail.room" :key="index">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="py18 bgff r6 mt10 px10">
			<text class="bold6 c00">购买须知</text>
			<view class="c85 fs14 mt6">{{detail.rule_txt}}。</view>
		</view>
		<view class="py18 bgff r6 mt10 px10 c00">
			<text class="bold6">购买须知</text>
			<view class="flex flexC flexB aliC mt8">
				<view class="flex1 bor57 r8 py6">
					<view class="c00">选择</view>
					<view class="c00">门店</view>
				</view>
				<text class="fs12 c85">＞</text>
				<view class="flex1 bor57 r8 py6">
					<view class="c00">选择</view>
					<view class="c00">包间</view>
				</view>
				<text class="fs12 c85">＞</text>
				<view class="flex1 bor57 r8 py6">
					<view class="c00">选择</view>
					<view class="c00">时间</view>
				</view>
				<text class="fs12 c85">＞</text>
				<view class="flex1 bor57 r8 py6">
					<view class="c00">选择</view>
					<view class="c00">抵扣</view>
				</view>
				<text class="fs12 c85">＞</text>
				<view class="flex1 bor57 r8 py6">
					<view class="c00">提交</view>
					<view class="c00">订单</view>
				</view>
			</view>
		</view>
		<view class="bgff flex flexC flexB r6 p10 bold6 mt10">
			<text class="">订单总价</text>
			<view class="cff0">
				<text>￥</text>
				<text class="fs20">{{detail.price}}</text>
			</view>
		</view>
		<view class="flex flexC flexB fixed bgff r40 shadow">
			<view class="flex1 pl22">
				<view class="cff0 bold6">
					<text>总计：￥</text>
					<text class="fs20">{{detail.price}}</text>
				</view>
				<view class="c85 fs12">已优惠￥{{detail.discount}}</view>
			</view>
			<view class="bg57 btn px10 py16 bold6" @click="buy">立即支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "group-buy",
		data() {
			return {
				detail: null,
				id: ''
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.getDetail();
		},
		methods: {


			buy() {
				let param = {
					id: this.id,
				};
				let that = this;
				this.$api.addTuanOrderSxf(param).then(res => {
					if (res.code == 1) {

						that.wechatPay(res.data.payInfo)

					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},


			wechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {

						uni.showModal({
							title: "购买提示",
							content: "购买成功赶紧使用吧",
							showCancel: false,
							complete() {
								uni.navigateBack({
									delta:1
								})
							}
						})
					},
					fail: function(err) {
						uni.showToast({
							title: "取消购买",
							icon: 'none'
						});
					}
				});
			},
			getDetail() {

				let param = {
					id: this.id
				};
				let that = this;
				this.$api.tuanDetail(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.detail = res.data;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}

				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.groupBuy {
		padding-bottom: 144rpx;

		.fixed {
			position: fixed;
			bottom: 20rpx;
			left: 20rpx;
			width: calc(100% - 40rpx);
		}

		.btn {
			border-radius: 0 80rpx 80rpx 0;
		}
	}
</style>